<template>
  <div class="operate-log">
    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    stripe
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名">
    </el-table-column>
    <el-table-column
      prop="requestWay"
      label="请求方式">
    </el-table-column>
    <el-table-column
      prop="url"
      label="访问地址"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="name"
      label="操作详细"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="loginIp"
      label="登陆IP"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="操作时间">
    </el-table-column>
    </el-table> 

    <div class="block" style="margin-top: 20px; text-align: right; margin-right: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import api from '@/api';
import HouseFormPop from './HouseFormPop.vue';

export default {
    components: {
      HouseFormPop,
    },
    data() {
      return {
        currentPage: 1,
        total:100,
        pageSize:10,
        dialogFormVisible: false,
        tableData: [{
          username: '状元楼',
          requestWay: '一单元',
          url:'1㎡',
          name:'1间',
          loginIp: '20层',
          createTime: '2022-10-22 23:38:12'
        }],
        searchData:{
          pageNow: 1,
        },
      }
    },
    methods: {
      handleSizeChange(val) { 
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
         this.searchData.pageNow = val
         //获取操作日志信息
         this.onSubmit();
      },
      handleSelectionChange(selection) {
          this.selectedRow = selection
      },
      handleEdit(index, row) {
        this.updateTableData = row;
        this.dialogFormVisible = true;
      },
      onSubmit() {
        //获取操作日志信息
        api.operateLogList(this.searchData).then(res =>{
            if(res.type === 'error'){
                this.$message.error(res.message)
            }else if(res.data.code === 200){
              this.tableData = res.data.data.operateLogList
              console.log(res.data.data)
              this.total = res.data.data.total
            }else{
              this.$message.error(res.data.message)
            }
        })
      },
    },
    created () {
      //获取操作日志信息
      this.onSubmit();
    },
}
</script>
<style scoped>
.operate-log{
  background-color: #fff;
}
.operate-log .search{
  padding: 10px;
}
.operate-log .do{
  padding: 10px;
}
/* 自定义遮罩层样式 */
.operate-log .houseFormPop {
  background-color: rgba(0, 0, 0, 0.5); /* 遮罩层颜色 */
  z-index: 9999; /* 设置一个较高的 z-index 使遮罩层位于最上层 */
}
</style>